<template>
  <div class="pointsoperateCounty">
    <topBar :title="title"></topBar>
    <div class="echarts">
      <div class="top">
        <div class="left">
          <negativeValue :chartsData="chartsData"></negativeValue>
        </div>
        <div class="right">
          <div v-for="(item, index) in lineList" :key="index">
            <lineEcharts
              :id="'lineEcharts' + index"
              :lineData="item"
            ></lineEcharts>
          </div>
        </div>
      </div>
      <div class="bot">
          <div v-for="(item, index) in botLineData" :key="index">
            <lineEcharts
              :id="'lineEchartsBot' + index"
              :lineData="item"
            ></lineEcharts>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import { stepSubtable, stepSubmap } from "@/api/codeIncome/analysis";
import topBar from "./topBar";
import negativeValue from "../showEchart/negativeValue";
import lineEcharts from "../showEchart/lineEcharts";
export default {
  name: "pointsoperateCounty",
  components: {
    topBar,
    negativeValue,
    lineEcharts,
  },
  props: {
    searchData: {
        type: Object,
        default: {},
    },
  },
  watch: {
    searchData: {
        handler(newName) {
            this.getData();
            this.getlineData()
        },
        deep: true,
    },
  },
  data() {
    return {
      title: "台阶收入 – 分经营单元（县分）",
      chartsData: {},
      lineList: [],
      botLineData: [],
    };
  },
  created() {},
  mounted() {
    this.getData();
    this.getlineData();
  },
  methods: {
    // 获取码号收入整体趋势
    getData() {
      stepSubtable({
        cycleValue: this.searchData.acctMonth,
        areaId: this.searchData.areaId,
      }).then((res) => {
        if (res.code == 200) {
          let arr1 = [];
          let arr2 = [];
          res.data.forEach((item) => {
            arr1.push(item.areaName);
            arr2.push(item.indexValueTbRatio);
          });
          let obj = {};
          obj["areaName"] = arr1;
          obj["tbInrease"] = arr2;
          this.chartsData = obj;
        }
      });
    },
    getlineData() {
      stepSubmap({
        cycleValue: this.searchData.acctMonth,
        areaId: this.searchData.areaId,
        flag: 2
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let arr = [];
          data.forEach((item) => {
            let obj = {};
            obj["title"] = item.name;
            let lastdataArr = [];
            let indataArr = [];
            item.data.forEach((it) => {
              lastdataArr.push(it.indexValueTb);
              indataArr.push(it.indexValue);
            });
            let indata = [];
            indataArr.forEach((item) => {
              if (item != undefined && item != null && item != 0) {
                indata.push(item);
              } else {
                indata.push('');
              }
            });
            let lastdata = []
            lastdataArr.forEach((item) => {
              if (item != undefined && item != null && item != 0) {
                lastdata.push(item);
              } else {
                lastdata.push('');
              }
            });
            obj["lastdata"] = lastdata;
            obj["indata"] = indata;
            arr.push(obj);
          });
          this.lineList = arr.slice(0, 8);
          this.botLineData = arr.slice(8, arr.length)
        }
      });
    },
  },
};
</script>

<style scoped>
.pointsoperateCounty {
  box-sizing: border-box;
  padding: 20px;
  box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 15%);
}
</style>
<style scoped lang="scss">
.pointsoperateCounty {
  margin-top: 20px;
  .echarts {
    width: 100%;
    height: auto;
    .top {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: space-between;
      .left {
        width: 40%;
        height: 800px;
      }
      .right {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        > div {
          width: 50%;
          height: 200px;
        }
      }
    }
    .bot {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        > div {
          width: 33.33%;
          height: 200px;
        }
    }
  }
}
</style>
